<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>玫瑰红 - 中国色 - 中国传统颜色</title>
    <link rel="stylesheet" href="index.css">
    <!--这是显示在选项卡上面的图标logo-->
    <link rel="shortcut icon" href="img/favicon.ico" type="img/x-icon">
</head>
<body>
    <main>
        <!--左半部分每行7个-->
        <div>
            <!--细分每一个颜色的名字与导入的图-->
            <!--大盒子装模版生成的所有颜色实例-->
            <div id="other"></div>
            <!--模版部分-->
            <script id="templateid" type="text/html">
                {{ each list as item }}
                <div class="seven">
                    <div style="border-top:5px solid #{{ item.num }};">
                    <!--四个圈是两个图做的-->
                        <img src="img/0.png" alt="">
                        <img src='{{ item.url }}' alt="">
                        <!--颜色名-->
                        <div style="color:#{{ item.num }};">
                            <p>{{ item.name[0] }}</p>
                            <p>{{ item.name[1] }}</p>
                            <p>{{ item.name[2] }}</p>
                            <p>{{ item.name[3] }}</p>
                        </div>
                        <!--颜色名拼音-->
                        <b>
                            {{ item.pinyin }}
                        </b>
                        <!--编号-->
                        <section>
                            {{ item.num }}
                        </section>
                    </div>
                </div>
            {{ /each }}
            </script>
        </div>
    </main>
    <!--右半部分-->
    <div id="floor">
        <main>
            <div id="right">
                <!--CMYKRGB部分-->
                <div id="CMYK">
                    <!--C值-->
                    <div id="c">
                        <p>C</p>
                        <div class="box">
                            <div class="num">0</div>
                            <section>
                                <div class="div2"></div>
                                <div class="div3"></div>
                            </section>
                        </div>
                    </div>
                    <!--M值-->
                    <div id="m">
                        <p>M</p>
                        <div class="box">
                            <div class="num">74</div>
                            <section>
                                <div class="div2"></div>
                                <div class="div3"></div>
                            </section>
                        </div>
                    </div>
                    <!--Y值-->
                    <div id="y">
                        <p>Y</p>
                        <div class="box">
                            <div class="num">73</div>
                            <section>
                                <div class="div2"></div>
                                <div class="div3"></div>
                            </section>
                        </div>
                    </div>
                    <!--K值-->
                    <div id="k">
                        <p>K</p>
                        <div class="box">
                            <div class="num">19</div>
                            <section>
                                <div class="div2"></div>
                                <div class="div3"></div>
                            </section>
                        </div>
                    </div>
                    <!--R值-->
                    <div id="r">
                        <p>R</p>
                        <div class="box">
                            <div class="num">204</div>
                        </div>
                    </div>
                    <!--G值-->
                    <div id="g">
                        <p>G</p>
                        <div class="box">
                            <div class="num">53</div>
                            <div id="color" style="display:none;">#66666;</div>
                        </div>
                    </div>
                    <!--B值-->
                    <div id="b">
                        <p>B</p>
                        <div class="box">
                            <div class="num">54</div>
                        </div>
                    </div>
                </div>
                <!--这是显示名字的地方-->
                <div id="colName">
                    <!--写的前面四个p标签，因为名字有长有短-->
                    <p>艳</p>
                    <p>红</p>
                    <p></p>
                    <p></p>
                    <!--拼音-->
                    <p>YANHONG</p>
                </div>
                <!--右边的CHINESE COLOR-->
                <div id="chinaCol">
                    <!--图的路径而已-->
                    <img src="img/logo.png" alt="">
                </div>
                <!--归属部分-->
                <div id="foot">
                    <!--两个logo部分-->
                    <div id="logo">
                        <!--这是微博的-->
                        <a href="" id="first">
                            <img src="img/weibologo.png" alt="">
                        </a>
                        <!--这是捐献的-->
                        <section style="width:36px;height:32px;line-height:36px;">
                            <!--不放上去就是一张图，大写的P-->
                            <img src="img/paypal.png" alt="" id='second'>
                            <!--放上去后就删除select的hid类名，给大写的P加上hid类名-->
                            <select class="hid" id="juanzeng">
                                <!--下拉-->
                                <option value="juanzeng">捐赠</option>
                                <option value="one">1$</option>
                                <option value="five">5$</option>
                                <option value="ten">10$</option>
                            </select>
                        </section>
                        <!--一些文字-->
                        <div>
                            <p>Copyright © 2013 by <a href="">Perchouli</a> Shanzhai to <a href="">Nipponcolors</a></p>
                            <p>参看: 色谱 中科院科技情报编委会名词室.科学出版社,1957 *中国颜色,2013</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <!--用了jquery等-->
    <script src="jquery-3.1.1.js"></script>
    <script src="jquery.color-2.1.2.js"></script>
    <script src="template.js"></script>
    <script src="index.js"></script>
    <!--原网址-->
    <!--http://zhongguose.com/#yanhong-->
</body>
</html>